// 主题色
@bgcolor: #dd001b;
// 图片圆角
@imgBorderRadius: 0.11rem;
// 图标宽度
@iconWidth: 1rem;
// 图标下方文本大小
@iconText: 0.24rem;

// 定义盒子模型 两边对齐布局
.flex-between {
  display: flex;
  justify-content: space-between;
}

.titleFixed {
  position: sticky;
  width: 100vw;
  top: 0;
  background-color: #fff;
  z-index: 99;
}

// 定义盒子模型  分散布局
.flex-around {
  display: flex;
  justify-content: space-around;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 两行文本溢出打点 ...
.twoLinesEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
}

// 单行文字打点
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 小标签
.smallTag {
  box-sizing: border-box;
  padding: 0.1rem 0.1rem 0.1rem 0.13rem;
  display: flex;
  align-items: center;
  // justify-content: center;
  font-size: 0.2rem;
  border-radius: 1rem;
  letter-spacing: 0.05rem;
  text-align: center;
  border: 1px solid #ccc;
}

.tag-group {
  box-sizing: border-box;
  padding: 0.1rem 0.2rem 0.1rem 0.2rem;
  font-size: 0.2rem;
  border-radius: 0.2rem;
  background-color: #eee;
  margin-right: 0.1rem;
}

// 遮罩层
.mask {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
}

// 灰色的数字样式
.num {
  font-size: 0.24rem;
  color: #999;
}

// 导航栏的访问样式
.ac {
  color: #000;
  font-size: 0.28rem;
}

// a标签覆盖整个区域
.cover {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 100%;
}

// 页面灰色分割线样式
.split {
  width: 100%;
  height: 0.13rem;
  background-color: #eee;
}

// 页面有的左右padding
.pd13 {
  box-sizing: border-box;
  padding: 0 0.13rem;
}

// 页面有的左右padding
.pd23 {
  box-sizing: border-box;
  padding: 0 0.23rem;
}

// 点击有波纹效果
.ripple {
  position: relative;
  overflow: hidden;
  user-select: none;

  &:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    //设置径向渐变
    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity .6s;
  }

  &:active:after {
    transform: scale(0, 0);
    opacity: .3;
    //设置初始状态
    transition: 0s;
  }
}
